<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">  
    <meta name="apple-mobile-web-app-status-bar-style" content="black">  

    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <style type="text/css">
    	.mui-content {
    		margin-top: 10px;
    	}
    	.mui-card{
    		margin-top: 20px;
    	}
    	.mui-badge{
    		margin: 0px 9px;
    		width: 22px;
    		height: 20px;
    		line-height:1.2;
    		text-align:center;
    		padding-left: 4px;
    	}
    </style>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">点一点</h1>
			<button class="mui-active-back mui-btn mui-btn-blue mui-btn-link mui-pull-left" id="back">
			<span class="mui-icon mui-icon-left-nav"></span>首页
		</button>
	</header>
	<div class="mui-content">
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>注数:</label>
					<div class="mui-numbox">
							<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
							<input class="mui-numbox-input" type="number" id="number"/>
							<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
					</div>
			</div>
		</form>
		<div class="mui-content-padded">
			<button class="mui-btn mui-btn-primary mui-btn-block " id="login1">摇号</button>
		</div>
		<div class="mui-content-padded">
			<button class="mui-btn mui-btn-success mui-btn-block " id="login2">随机</button>
		</div>	
		<div class="mui-card">
			<ul class="mui-table-view" id="ul">
				
			</ul>		
		</div>
	</div>	
</body>
<script type="text/javascript" charset="utf-8">
	mui.plusReady(function(){
		document.getElementById("login1").addEventListener("tap",function(){
			var num=document.getElementById("number").value;
			takeNum(num);
		});
		document.getElementById("login2").addEventListener("tap",function(){
			var a=Math.ceil(Math.random()*5);
			takeNum(a);
		});
		document.getElementById("back").addEventListener("tap",function(){
			window.location.href="index.html";
		});
		
		mui.oldback = mui.back;
		var clickNum = 0;
		mui.back = function(event){
		    clickNum++;
		    if(clickNum > 1){
		        plus.runtime.quit();
		    }else{
		        mui.toast("再按一次退出应用");
		    }
		    setTimeout(function(){
		        clickNum = 0
		    },1000);
		    return false;
		}
	});
	
	function qiu(){
		var red= [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
    16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 16, 27, 28, 29, 30, 31,
    32, 33 ];
    	var blue= [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15,
    16 ];
    	var index=new Array();		
		for(var j=0;j<6;j++){
					var mark = Math.ceil(Math.random()*33-1);	
					index[j]=red[mark];
					for(var n=0;n<j;n++){
						if(index[n]==red[mark]){
							j--;
							break;
						}
					}
		}
		index.sort(function(a,b){return a>b?1:-1});
		index[6]=Math.ceil(Math.random()*16);	
		return index;
	}
	
	function takeNum(num){
		removeAllChild("ul");
		if(num>0){
			for(var i=0;i<num;i++){
				var html="";
				var index=qiu();
				var k=index.length;
				for(var j=0;j<k;j++){
					if(j==6){
						html+='<span class="mui-badge mui-badge-primary">'+index[j]+'</span>';
					}else{
						html+='<span class="mui-badge mui-badge-red">'+index[j]+'</span>';
					}	
				}
				var cName="mui-table-view-divider";
				addElementLi("ul",cName,html);	
			}
		}
	}
	
	//删除所有的子节点信息
	function removeAllChild(id)
	{
	    var div = document.getElementById(id);
	    while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
	    {
	        div.removeChild(div.firstChild);
	    }
	}
	
	//添加子节点
	function addElementLi(id,cName,html) {
　　　　var ul = document.getElementById(id);

　　　　//添加 li
　　　　var li = document.createElement("li");

　　　　//设置 li 属性，如 id
　　　　li.setAttribute("class", cName);

　　　　li.innerHTML = html;
　　　　ul.appendChild(li);
　　}



</script>
</html>